<template>
  <div
    v-if="
      ($route.query && $route.query.token && $route.query.appAcctId) ||
      configItem.CURRENT_THIRD_LOGIN_VENDOR === '2'
    "
  ></div>
  <div class="login" v-else>
    <div class="login-form-container">
      <div class="header-title">
        <login-logo></login-logo>
      </div>
      <!-- 首次登录 -->
      <template v-if="secondaryLoginPolicyId == '1' && !isFirstLogin">
        <p class="info">账号登录</p>
        <el-form
          class="login-form"
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
        >
          <el-form-item prop="userName">
            <common-input
              data-test="login-input-username"
              :verify="false"
              v-model="loginForm.userName"
              type="text"
              placeholder="请输入你的账号"
            >
              <i slot="prefix" class="iconfont icon-yonghu" />
            </common-input>
          </el-form-item>
          <el-form-item prop="password">
            <common-pwd-input
              data-test="login-input-password"
              v-model="loginForm.password"
              ref="pwdInput"
              placeholder="请输入你的密码"
              @keyup.enter.native="handleLogin(true, 'pwdInput')"
            >
              <i slot="prefix" class="iconfont icon-mima" />
            </common-pwd-input>
          </el-form-item>
          <el-form-item prop="verifyCode" v-if="pictureVercodeFlag">
            <common-input
              v-model="loginForm.verifyCode"
              ref="codeInput"
              placeholder="请输入图形验证码"
              style="width: 63%"
              @keyup.enter.native="handleLogin(true, 'codeInput')"
            >
              <i slot="prefix" class="iconfont icon-tuxingyanzhengma" />
            </common-input>
            <div class="login-code">
              <img :src="codeUrl" @click="getCode" class="login-code-img" />
            </div>
          </el-form-item>
          <div class="flex">
            <!-- <router-link to="/findpwd"> 忘记密码？ </router-link> -->
          </div>
          <el-form-item style="width: 100%">
            <!-- <el-button
              data-test="login-button-submit"
              :loading="loading"
              size="medium"
              type="primary"
              style="width: 100%"
              @click.native.prevent="handleLogin(false)"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button> -->

            <div
              data-test="login-button-submit"
              @click="handleLogin(false)"
              :class="['custom-login-button', loading ? 'disabled-button' : '']"
              style="background: #409eff; border: 1px #409eff solid"
              @mouseover="handleMouseover"
              @mouseout="handleMouseout"
            >
              <span v-if="!loading">登 录</span>
              <span v-else
                ><i
                  class="el-icon-loading"
                  style="margin: auto; margin-right: 5px"
                ></i
                >登 录 中...</span
              >
            </div>
          </el-form-item>
        </el-form>
      </template>

      <template v-else-if="!isFirstLogin">
        <p class="info">验证身份</p>
        <el-form ref="checkForm" :model="checkForm" :rules="checkRules">
          <div class="zhanghao" v-if="secondaryLoginPolicyId == '2'">
            手机号 {{ form2.encodePhone }}
          </div>
          <div class="zhanghao" v-if="secondaryLoginPolicyId == '3'">
            邮箱 {{ form2.encodeEmail }}
          </div>
          <el-form-item prop="msgVerCode">
            <common-input
              v-model="checkForm.msgVerCode"
              auto-complete="off"
              placeholder="请输入验证码"
              :maxlength="6"
              style="width: 54%"
            >
              <i slot="prefix" class="iconfont icon-tuxingyanzhengma" />
            </common-input>
            <div class="login-code btn" v-if="!phoneYzm" @click="sendCode">
              获取验证码
            </div>
            <div class="login-code btn" v-else>
              重新获取（{{ phoneYzmTimes }}s）
            </div>
          </el-form-item>
          <div style="margin-bottom: 30px"></div>
          <el-form-item style="width: 100%">
            <!-- <el-button
              :loading="checkLoading"
              size="medium"
              type="primary"
              style="width: 100%"
              @click.native.prevent="handleCheckLogin"
            >
              <span v-if="!checkLoading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button> -->
            <div
              @click="handleCheckLogin"
              :class="[
                'custom-login-button',
                checkLoading ? 'disabled-button' : '',
              ]"
              style="background: #409eff; border: 1px #409eff solid"
              @mouseover="handleMouseover"
              @mouseout="handleMouseout"
            >
              <span v-if="!checkLoading">登 录</span>
              <span v-else
                ><i
                  class="el-icon-loading"
                  style="margin: auto; margin-right: 5px"
                ></i
                >登 录 中...</span
              >
            </div>
          </el-form-item>
        </el-form>
      </template>

      <!-- 第一次登陆编辑密码 -->
      <template class="user-form" v-if="isFirstLogin">
        <p class="info update-pwd-title">修改密码</p>
        <el-form
          class="user-form"
          ref="userForm"
          :model="userForm"
          :rules="userRules"
        >
          <el-form-item label="新密码"></el-form-item>
          <el-form-item prop="newPassword">
            <el-popover
              popper-class="popper-box"
              placement="right"
              width="150"
              v-model="isShow"
              trigger="manual"
            >
              <div class="rule-form">
                <div class="item-rule">
                  <span v-if="row.firstIsUpper || row.firstIsUpper == 0">
                    长度范围{{
                      row.minLength || row.maxLength
                        ? `[${row.minLength}-${row.maxLength}]`
                        : "无"
                    }}
                  </span>
                </div>
                <div class="item-rule">
                  <span v-if="row.firstIsUpper || row.firstIsUpper == 0">
                    首字母大写{{
                      row.firstIsUpper || row.firstIsUpper == 0
                        ? firstIsUpper[row.firstIsUpper]
                        : "无"
                    }}
                  </span>
                </div>
                <div class="item-rule">
                  <span v-if="row.hasLower || row.hasLower == 0">
                    小写字母{{
                      row.hasLower || row.hasLower == 0
                        ? showTextRule[row.hasLower]
                        : "无"
                    }}
                  </span>
                </div>
                <div class="item-rule">
                  <span v-if="row.hasNumber || row.hasNumber == 0">
                    数字{{
                      row.hasNumber || row.hasNumber == 0
                        ? showTextRule[row.hasNumber]
                        : "无"
                    }}
                  </span>
                </div>
                <div class="item-rule">
                  <span v-if="row.hasSpecial || row.hasSpecial == 0">
                    特殊字符{{
                      row.hasSpecial || row.hasSpecial == 0
                        ? `${showTextRule[row.hasSpecial] + row.characters}`
                        : "无"
                    }}
                  </span>
                </div>
                <div class="item-rule is-last">
                  <span v-if="row.hasUpper || row.hasUpper == 0">
                    大写字母{{
                      row.hasUpper || row.hasUpper == 0
                        ? showTextRule[row.hasUpper]
                        : "无"
                    }}
                  </span>
                </div>
              </div>
              <common-pwd-input
                slot="reference"
                data-test="login-input-username"
                v-model="userForm.newPassword"
                auto-complete="off"
                @focus="inputFocus"
                @blur="inputBlur"
                placeholder="请输入新密码"
              >
              </common-pwd-input>
            </el-popover>
          </el-form-item>
          <el-form-item label="确认密码"></el-form-item>
          <el-form-item prop="confirmPassword">
            <common-pwd-input
              data-test="login-input-password"
              v-model="userForm.confirmPassword"
              ref="updatePwdInput"
              auto-complete="off"
              placeholder="请确认密码"
              @keyup.enter.native="update(true, 'updatePwdInput')"
            >
            </common-pwd-input>
          </el-form-item>

          <el-form-item style="width: 100%">
            <!-- <el-button
              :loading="updateloading"
              size="medium"
              type="primary"
              style="width: 100%; margin-top: 40px"
              @click.native.prevent="update(false)"
            >
              <span v-if="!updateloading">确认修改</span>
              <span v-else>修 改 中...</span>
            </el-button> -->
            <div
              data-test="login-button-submit"
              @click="update(false)"
              :class="[
                'custom-login-button',
                updateloading ? 'disabled-button' : '',
              ]"
              style="background: #409eff; border: 1px #409eff solid"
              @mouseover="handleMouseover"
              @mouseout="handleMouseout"
            >
              <span v-if="!updateloading">保 存</span>
              <span v-else
                ><i
                  class="el-icon-loading"
                  style="margin: auto; margin-right: 5px"
                ></i
                >保 存 中...</span
              >
            </div>
          </el-form-item>
        </el-form>
      </template>
    </div>
    <!--  底部  -->
    <div class="el-login-footer">
      <span>{{ systemInfo.copyrightInfo }}</span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

let timeFlag = null;
import {
  getCodeImg,
  getUserLoginRule,
  sendVerCodeForSecondLogin,
  secondLogin,
  updateFirstLoginToN,
} from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import { updateUserPwd, getDeFaultPwdRule } from "@/api/person/index";
import Utils from "@/utils";
import { decode, encode } from "@/utils/aesUtils";
import { removeToken } from "@/utils/auth";
import LoginLogo from "@/components/LoginLogo";
import LoginThird from "./loginThird";
import { getLogout } from "@/api/home";

export default {
  name: "Login",
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.userForm.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      configItem: window.sp_config,
      isShow: false,
      codeUrl: "",
      cookiePassword: "",
      loginForm: {
        userName: "",
        password: "",
        rememberMe: false,
        verifyCode: "",
        verifyCodeUuid: "",
      },
      loginRules: {
        userName: [
          {
            required: true,
            trigger: "blur",
            message: "请输入账号",
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: "请输入密码",
          },
        ],
        verifyCode: [
          {
            required: true,
            trigger: "blur",
            message: "请输入验证码",
          },
        ],
      },
      loading: false,
      redirect: undefined,
      //二次登录相关
      checkLoading: false,
      phoneVercodeFlag: null,
      pictureVercodeFlag: null, //是否显示图形验证码
      secondaryLoginPolicyId: "1", //1表示可以放行，2表示需要手机验证，3表示需要进一步验证
      phoneYzm: false, //验证码发送没
      phoneYzmTimes: 60,
      // 发送验证码
      form2: {
        phone: "",
        userName: "",
        sendMsgType: "", //1手机 3邮箱
        emai: "",
      },
      //验证验证码
      checkForm: {
        msgVerCodeId: "",
        msgVerCode: "",
        userName: "",
        step: "step1+ok",
      },
      checkRules: {
        msgVerCode: [
          {
            required: true,
            trigger: "blur",
            message: "请输入验证码",
          },
        ],
      },
      isFirstLogin: false,
      userForm: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      userRules: {
        newPassword: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          {
            required: true,
            message: "请确认密码",
            trigger: "blur",
          },
          {
            required: true,
            validator: equalToPassword,
            trigger: "blur",
          },
        ],
      },
      row: {},
      showTextRule: ["必须包含", "不允许包含", "不限制"],
      firstIsUpper: ["必须包含", "无", "不限制"],
      updateloading: false,
      isCode: false,
    };
  },
  computed: {
    ...mapGetters(["systemInfo"]),
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {
    // console.log("2022/03/22 16:02");
    /**
       *  1、登录页面，首先调接口/loginrule/getUserLoginRule，根据返回值，来决定是否显示图片验证码。返回0表示启用，1表示不启用，2表示输错用户名密码失败几次后启用。
       2、如果是需要开启图片验证码，则调用接口/code来显示图片验证码
       3、一次登录指的是输入用户名密码、图片码进行登录。接口是/login/firstlogin，需要传的参数是:userName,password,verifyCode,verifyCodeUuid
       */
    // console.log(this.$route.query);
    if (window.sp_config.CURRENT_THIRD_LOGIN_VENDOR === "2") {
      this.thirdLogin("2");
    } else if (
      window.sp_config.CURRENT_THIRD_LOGIN_VENDOR === "1" &&
      this.$route.query &&
      this.$route.query.token &&
      this.$route.query.appAcctId
    ) {
      this.thirdLogin("1");
    } else {
      // this.getUserLoginRuleFun();
      this.getCookie();
    }
  },
  components: {
    LoginLogo,
    LoginThird,
  },
  methods: {
    thirdLogin(flag) {
      Cookies.remove("userName");
      Cookies.remove("password");
      Cookies.remove("rememberMe");

      if (flag === "2") {
        this.$store
          .dispatch("ThirdTaiyueLogin")
          .then((res) => {
            if (res && res.code === 200) {
              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
              this.getLogout();
            } else {
              this.$GlobalErrorConfirm("登录失败", res.msg);
            }
          })
          .catch((err) => {
            this.$GlobalErrorConfirm("登录失败", err.msg);
          });
      } else {
        this.$store
          .dispatch("ThirdLogin", {
            token: this.$route.query.token,
            appAcctId: this.$route.query.appAcctId,
          })
          .then((res) => {
            if (res && res.code === 200) {
              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
              this.getLogout();
            } else {
              this.$GlobalErrorConfirm("登录失败", res.msg);
            }
          })
          .catch((err) => {
            this.$GlobalErrorConfirm("登录失败", err.msg);
          });
      }
    },
    /**
     * 决定验证码是否显示----返回0表示启用，1表示不启用，2表示输错用户名密码失败几次后启用
     */
    getUserLoginRuleFun() {
      getUserLoginRule().then((res) => {
        if (res && res.code === 200) {
          if (res.data.pictureVercodeFlag == 0) {
            this.pictureVercodeFlag = true;
            this.getCode();
          } else {
            this.pictureVercodeFlag = false;
          }
        }
      });
    },
    getCode() {
      getCodeImg().then((res) => {
        if (res && res.code === 200) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.verifyCodeUuid = res.uuid;
        } else {
          // this.$GlobalErrorConfirm('登录异常', res.msg).then()
        }
      });
    },
    getCookie() {
      const userName = Cookies.get("userName");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      const msgVerCodeId = Cookies.get("msgVerCodeId");
      this.loginForm = {
        userName: userName === undefined ? this.loginForm.userName : userName,
        password:
          password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
      };
      this.checkForm.msgVerCodeId =
        msgVerCodeId === undefined ? "" : msgVerCodeId;
    },
    /**
     * 登录
     */
    handleLogin(isTrue, refName) {
      if (isTrue) this.$refs[refName].$refs.input.blur();
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("userName", this.loginForm.userName, {
              expires: 30,
            });
            Cookies.set("password", encrypt(this.loginForm.password), {
              expires: 30,
            });
            Cookies.set("rememberMe", this.loginForm.rememberMe, {
              expires: 30,
            });
          } else {
            Cookies.remove("userName");
            Cookies.remove("password");
            Cookies.remove("rememberMe");
            // const f = () => {
            //   let pwd = this.loginForm.password;
            //   console.log("加密:", encode(pwd));
            //   console.log(
            //     "解密:",
            //     decode("mHs+OkQbgOwdoPfJ7yRo4w==")
            //     // decode(encode(pwd)),
            //   );
            // };
            // f();
            this.$store
              .dispatch("Login", {
                ...this.loginForm,
                password: encode(this.loginForm.password),
                userName: encode(this.loginForm.userName),
                flag: this.loginForm.userName == "admin",
                // password: encode(this.loginForm.password),
                // userName: encode(this.loginForm.userName),
              })
              .then((res) => {
                if (res && res.rescode === 200) {
                  this.loading = false;
                  // this.$message.success("登录成功");
                  this.$router
                    .push({ path: this.redirect || "/" })
                    .catch(() => {});
                  // this.secondaryLoginPolicyId = res.data.secondaryLoginPolicyId;
                  // this.form2.userName = res.data.userName;
                  // this.form2.phone = res.data.mobilePhone
                  //   ? res.data.mobilePhone
                  //   : "";
                  // this.form2.encodePhone = Utils.phoneEncryption(
                  //   decode(this.form2.phone)
                  // );
                  // this.form2.email = res.data.email ? res.data.email : "";
                  // this.form2.encodeEmail = Utils.emailEncryption(
                  //   decode(this.form2.email)
                  // );
                  // this.checkForm.userName = res.data.userName;

                  // if (this.secondaryLoginPolicyId == "1") {
                  //   // 第一次进系统、密码不符合规则、密码和初始密码一致时，需强制修改密码
                  //   if (
                  //     res.data.isForceUpdatePwd === 0 ||
                  //     res.data.isDstinguish === 1 ||
                  //     res.data.isDstinguish === 2
                  //   ) {
                  //     let msg =
                  //       res.data.isDstinguish === 1
                  //         ? "当前密码为初始密码，请先修改！"
                  //         : res.data.isDstinguish === 2
                  //         ? "当前密码不符合密码规则，请先修改！"
                  //         : "";
                  //     if (msg) {
                  //       this.$message({
                  //         message: msg,
                  //         type: "warning",
                  //         duration: 5000,
                  //       });
                  //     }
                  //     //第一次登陆跳转编辑密码页面
                  //     this.getDeFaultPwdRule();
                  //     this.isFirstLogin = true;
                  //   } else {
                  //     this.$router
                  //       .push({ path: this.redirect || "/" })
                  //       .catch(() => {});

                  //     this.$store.dispatch("firstCheckPwd", {
                  //       ...this.loginForm,
                  //       password: encode(this.loginForm.password),
                  //       userName: encode(this.loginForm.userName),
                  //     });
                  //     this.getLogout();
                  //     // this.$GlobalSuccessMessage('登录成功')
                  //     if (res.data.pwdNextUpdateTime) {
                  //       setTimeout(() => {
                  //         this.$GlobalErrorConfirm(
                  //           "警告",
                  //           "密码即将过期，请修改密码！",
                  //           "知道了",
                  //           "warning"
                  //         ).then();
                  //       }, 500);
                  //     }
                  //   }
                  // } else {
                  //   if (timeFlag) clearInterval(timeFlag);
                  //   this.phoneYzmTimes = 60;
                  //   if (this.secondaryLoginPolicyId == "2") {
                  //     //手机验证
                  //     this.form2.sendMsgType = "1";
                  //   }
                  //   if (this.secondaryLoginPolicyId == "3" && res.data.email) {
                  //     //邮箱验证
                  //     this.form2.sendMsgType = "3";
                  //   }
                  //   // else if (this.secondaryLoginPolicyId == '3' && !res.data.email) {
                  //   //   this.$GlobalErrorConfirm('登录失败', '您未配置邮箱，无法进行邮箱登录，请联系管理员！').then()
                  //   //   this.secondaryLoginPolicyId = '1'
                  //   // }
                  //   return false;
                  // }
                } else {
                  this.$GlobalErrorConfirm("登录失败", res.msg).then(() => {
                    setTimeout(() => {
                      if (isTrue) this.$refs[refName].$refs.input.focus();
                    }, 400);
                  });
                }
              })
              .catch((err) => {
                this.loading = false;
                this.$GlobalErrorConfirm("登录失败", err.msg).then(() => {
                  setTimeout(() => {
                    if (isTrue) this.$refs[refName].$refs.input.focus();
                  }, 400);
                });
                if (err.msg === "图片验证码错误" && !this.pictureVercodeFlag) {
                  this.getCode();
                }
                // this.getCode();
                if (err.data && err.data.pictureShowFlag == 0) {
                  this.pictureVercodeFlag = true;
                }
              });
          }
        }
      });
    },
    /**
     * 二次登录
     */
    //发送短信验证码
    sendCode() {
      // this.next();
      if (!this.form2.email && this.secondaryLoginPolicyId === "3") {
        return this.$GlobalErrorConfirm(
          "获取失败",
          "您未配置邮箱，请联系管理员！"
        );
      }
      let params = Object.assign({}, this.form2);
      delete params.encodeEmail;
      delete params.encodePhone;
      if (!this.isCode) {
        this.isCode = true;
        sendVerCodeForSecondLogin(params)
          .then((res) => {
            if (res && res.code === 200) {
              this.phoneYzm = true;
              this.checkForm.msgVerCodeId = res.data.msgVerCodeId;
              if (res.data.msgVerCodeId) {
                let expiresTime = new Date().getTime();
                Cookies.set("msgVerCodeId", res.data.msgVerCodeId, {
                  expires: new Date(expiresTime + 60 * 1000 * 3),
                });
              }
              timeFlag = setInterval(() => {
                this.phoneYzmTimes--;
                if (this.phoneYzmTimes === 0) {
                  this.phoneYzm = false;
                  this.phoneYzmTimes = 60;
                  // this.checkForm.msgVerCodeId = ''
                  clearInterval(timeFlag);
                }
              }, 1000);
            } else {
              this.$GlobalErrorConfirm("发送失败", res.msg).then();
            }
          })
          .catch((err) => {
            this.$GlobalErrorConfirm("发送失败", err.msg).then();
          })
          .finally(() => (this.isCode = false));
      }
    },
    /**
     * 验证二次登录
     */
    handleCheckLogin() {
      this.$refs.checkForm.validate((valid) => {
        if (valid) {
          this.$store
            .dispatch("secondLogin", this.checkForm)
            .then((res) => {
              if (res && res.code === 200) {
                if (res.data.isForceUpdatePwd === 0) {
                  //第一次登陆跳转编辑密码页面
                  this.getDeFaultPwdRule();
                  this.isFirstLogin = true;
                } else {
                  this.$router
                    .push({ path: this.redirect || "/" })
                    .catch(() => {});

                  this.$store.dispatch("firstCheckPwd", this.checkForm);

                  // this.$GlobalSuccessMessage('操作成功')
                  if (res.data.pwdNextUpdateTime) {
                    setTimeout(() => {
                      // this.$message({
                      //   showClose: true,
                      //   message: '密码即将过期，请修改密码！',
                      //   type: 'warning'
                      // })
                      this.$GlobalErrorConfirm(
                        "警告",
                        "密码即将过期，请修改密码！",
                        "知道了",
                        "warning"
                      ).then();
                    }, 500);
                  }
                }
                this.checkLoading = false;
              } else {
                this.$GlobalErrorConfirm("登录失败", res.msg).then(() => {
                  // this.secondaryLoginPolicyId === '1';
                  // this.isFirstLogin = false
                });
              }
            })
            .catch((err) => {
              this.$GlobalErrorConfirm("登录失败", err.msg).then(() => {
                this.secondaryLoginPolicyId = "1";
                this.isFirstLogin = false;
              });
            })
            .finally(() => {
              setTimeout(() => {
                if (timeFlag) clearInterval(timeFlag);
                this.phoneYzm = false;
                this.phoneYzmTimes = 60;
                this.checkForm.msgVerCode = "";
              }, 500);
            });
        }
      });
    },

    /**
     * 获取密码规则
     */
    getDeFaultPwdRule() {
      getDeFaultPwdRule()
        .then((res) => {
          if (res && res.code === 200) {
            this.row = res.data;
          } else {
            this.$GlobalErrorConfirm("获取密码规则失败", res.msg).then();
          }
        })
        .catch((err) => {
          this.$GlobalErrorConfirm("获取密码规则失败", err.msg).then();
        });
    },

    /**
     * 编辑密码
     */
    update(isTrue, refName) {
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          if (isTrue) this.$refs[refName].$refs.input.blur();
          this.updateloading = true;
          updateUserPwd({
            newPwd: encode(this.userForm.newPassword),
            initPwd: 0,
          })
            .then((res) => {
              if (res && res.code === 200) {
                this.$GlobalSuccessMessage("操作成功，请重新登录");
                this.loginForm.userName = "";
                this.loginForm.password = "";
                this.loginForm.verifyCode = "";
                this.getCode();
                removeToken();
                setTimeout(() => {
                  this.isFirstLogin = false;
                  this.secondaryLoginPolicyId = "1";
                }, 500);
              } else {
                this.$GlobalErrorConfirm("修改失败", res.msg).then(() => {
                  setTimeout(() => {
                    if (isTrue) this.$refs[refName].$refs.input.focus();
                  }, 400);
                });
              }
            })
            .catch((err) => {
              this.$GlobalErrorConfirm("修改失败", err.msg).then(() => {
                setTimeout(() => {
                  if (isTrue) this.$refs[refName].$refs.input.focus();
                }, 400);
              });
            })
            .finally(() => (this.updateloading = false));
        }
      });
    },

    /**
     * 初次登录时询问是否编辑密保，更新密保状态
     */
    updateFirstLoginToN() {
      return new Promise((resolve, reject) => {
        updateFirstLoginToN({}).then((res) => {
          if (res && res.code === 200) {
            resolve();
          } else {
            reject();
          }
        });
      });
    },
    inputFocus() {
      this.isShow = true;
    },
    inputBlur() {
      this.isShow = false;
    },
    getLogout() {
      getLogout()
        .then((res) => {
          if (res && res.code === 200) {
          }
        })
        .catch();
    },
    handleMouseover() {
      document.getElementsByClassName(
        "custom-login-button"
      )[0].style.background = "#66B1FF";
      document.getElementsByClassName("custom-login-button")[0].style.border =
        "1px solid #66B1FF";
    },
    handleMouseout() {
      document.getElementsByClassName(
        "custom-login-button"
      )[0].style.background = "#409EFF";
      document.getElementsByClassName("custom-login-button")[0].style.border =
        "1px solid #409EFF";
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #000;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}

.title {
  display: flex;
  align-items: center;
  padding-bottom: 32px;
  justify-content: center;

  img {
    width: 110px;
    height: 25px;
    margin-right: 13px;
  }

  p {
    font-size: 20px;
    color: #fff;
    padding-left: 13px;
    position: relative;
    margin: 0;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 4px;
      bottom: 2px;
      width: 1px;
      background-color: #f5f5f5;
    }
  }
}

.info {
  text-align: center;
  font-size: 24px;
  color: #fff;
  //margin: 0px 0 32px 0;
  margin-top: 26px;
}

.login-form-container {
  border-radius: 6px;
  background: RGBA(33, 90, 165, 0.6);
  width: 350px;
  height: 390px;
  padding: 35px 24px 0;

  .login-form {
    .el-input {
      height: 40px;

      input {
        height: 40px;
        padding-left: 38px;
      }
    }
    .common-pwd-input {
      height: 40px;
    }
    ::v-deep .el-form-item__error {
      line-height: 0 !important;
    }
  }

  .el-input__prefix {
    width: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    i {
      color: #666;
      font-size: 14px;
      font-weight: 600;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }

  .el-checkbox__label {
    color: #ddd;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #fff;
  }

  .flex {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 33px;

    a {
      color: #ddd;
      font-size: 14px;

      &:hover {
        color: #fff;
      }
    }
  }

  .zhanghao {
    font-size: 15px;
    color: #fff;
    padding-bottom: 20px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 40px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }

  &.btn {
    width: 42%;
    color: #fff;
    background-color: #0577e5;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    line-height: 40px;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 38px;
}

.update-pwd-title {
  margin-bottom: 12px;
}

.user-form {
  .el-form-item:nth-child(1),
  .el-form-item:nth-child(3) {
    margin-bottom: 0;

    .el-form-item__label {
      color: #ffffff;
    }
  }

  .el-input {
    height: 40px;

    input {
      height: 40px;
      /*padding-left: 12px;*/
    }
  }

  .tips {
    .el-form-item__content {
      display: flex;

      .tips-label {
        color: #999;
        font-size: 12px;
        line-height: 18px;
      }
    }
  }
}

.custom-login-button {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  line-height: 16px;
  cursor: pointer;
  text-align: center;
  font-weight: 500;
  width: 100%;
  // &:hover {
  //   background: #66B1FF;
  //   border-color: #66B1FF;
  // }
}

.disabled-button {
  pointer-events: none;
  background-color: #a0cfff;
  border-color: #a0cfff;
}

.popper-box {
  /*background-color: #fe9b0f;*/
  font-size: 12px;
  border-color: #fe9b0f;
  opacity: 0.85;

  .rule-form {
    color: #303133 !important;
    font-size: 12px;

    .item-rule {
      margin-bottom: 2px;
    }

    .is-last {
      margin-bottom: 0 !important;
    }
  }
}
</style>
